<template>
    <div class="e-select-main" @mouseleave="mouseLeave">
        <div class="input" @click="openValue">
            <EInput :required="required" :disabled="true" :placeholder="placeholder" :input-value="defaultV"></EInput>
            <img src="@assets/arrow-down.png" alt="">
        </div>
        <div class="options-list" v-if="show">
            <ul>
                <li @click="getValue(index,item)" v-for="(item,index) in tableData" :key="item.id"
                    :class="selectIndex === index ? 'active' : ''">{{item.name}}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import EInput from './EInput'
    
    export default {
        name: "SelectBtn",
        data() {
            return {
                defaultV: this.defaultValue,
                defaultId: this.defaultId,
                show: false,
                selectIndex: null
            }
        },
        components: {
            EInput
        },
        props: {
            tableData: {
                type: Array,
                default: () => []
            },
            defaultValue: {
                type: Number | String,
                default: ''
            },
            placeholder: {
                type: String,
                default: '选择'
            },
            required: {
                type: Boolean,
                default: true
            }
        },
        watch: {
            defaultValue(newValue) {
                this.defaultV = newValue
                this.getSelectIndex()
            }
        },
        created() {
            this.getSelectIndex()
        },
        methods: {
            openValue() {
                this.show = !this.show
            },
            getValue(index, item) {
                this.defaultV = item.name
                this.defaultId = item.id
                this.selectIndex = index
                this.show = false
                this.$emit('getCotent', this.defaultId)
            },
            getSelectIndex() {
                this.tableData.forEach((item, index) => {
                    if (item.name == this.defaultV) {
                        this.selectIndex = index
                        return
                    }
                })
            },
            mouseLeave() {
                this.show = false
            },
        }
    }
</script>

<style lang="less" scoped>
    .e-select-main {
        width: 260px;
        height: 40px;
    }
    
    .input {
        width: 280px;
        height: 40px;
        position: relative;
    }
    
    .input img {
        position: absolute;
        width: 10px;
        height: auto;
        right: 14px;
        top: 45%;
    }
    
    .options-list {
        position: absolute;
        height: 300px;
        margin-left: 23px;
        width: 258px;
        background-color: #fff;
        overflow: auto;
        cursor: pointer;
        z-index: 999;
        
        ul li {
            z-index: 999;
            width: 100%;
            height: 40px;
            cursor: pointer;
            line-height: 40px;
            padding-left: 10px;
            
            &:hover {
                background-color: rgba(0, 0, 0, .04);
            }
        }
        
        .active {
            color: #ffdc20;
            font-weight: bold;
        }
    }
</style>
